<template>
  <h1>我是App组件</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <button type="" @click="sayHello">按钮</button>
</template>

<script>
import h from "vue";

export default {
  name: "App",
  // 所有Composition Api (组合式Api)的舞台
  setup() {
    // 数据
    let name = "李四";
    let age = 18;

    // 方法
    function sayHello() {
      alert(`我叫${name}，我今年${age}岁`);
    }
    //返回一个对象(常用)
    return {
      name,
      age,
      sayHello
    }

    // 返回一个函数，渲染函数（了解）
    // return () => h("h1", "尚硅谷？？？");

    // 注意的点！！！
      // 1.尽量不要与Vue2.x配置混用
      //       ·Vue2.x配置(data、methods、computed...)中可以访问到setup中的属性、方法
      //       ·但是在setup中不能访问到Vue2.x配置(data、methods、computed...)
      //       ·如果有重名，setup优先
      // 2.setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到ruturn对象中的属性


  },
};
</script>
